<template>
  <div>
    <div class="input">
      <van-cell-group>
        <van-field v-model="value" placeholder="回车搜索商品" />
      </van-cell-group>
    </div>
    <van-row>
      <van-col span="6"
        ><van-sidebar v-model="activeKey">
          <van-sidebar-item
            :title="item.name"
            v-for="(item, index) in nav"
            :key="index"
            @click="gotoclassifydetails(item.id)"
          /> </van-sidebar
      ></van-col>
      <van-col span="18">
        <div class="classifyswiper">
          <van-swipe :autoplay="3000">
            <van-swipe-item>
               <img src="../assets/img/7.jpg">
            </van-swipe-item>
            <van-swipe-item>
               <img src="../assets/img/47.jpg">
            </van-swipe-item>
            <van-swipe-item>
              <img src="../assets/img/52.jpg">
            </van-swipe-item>
            <van-swipe-item>
              <img src="../assets/img/61.jpg">
            </van-swipe-item>
            <van-swipe-item>
              <img src="../assets/img/62.jpg">
            </van-swipe-item>
          </van-swipe>
        </div>
        <div class="classifycontain">
          <van-grid :column-num="3">
            <van-grid-item
              v-for="item in list"
              :key="item.id"
              :icon="item.icon"
              :text="item.name"
              @click="gotodetails(item.name)"
            />
          </van-grid>
        </div>
        <div class="kong"></div>
      </van-col>
    </van-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeKey: "",
      value: "",
      list: [],
      copylist: [],
      nav: [],
    };
  },
  methods: {
    gotoclassifydetails(id) {
      console.log(id);
       this.list=[]
      // console.log(id);
      this.copylist.filter(item=>{
        if(id===item.pid){
          this.list.push(item)
        }
      })
      if(id==0){
        this.list=this.copylist
      }
    },
    gotodetails(item){
      this.$router.push({path:'/classifydetails',query:{item}})
    }
  },
  mounted() {
    this.$API.getClassify().then((res) => {
      // console.log(res);
      this.copylist = res.data.data;
      this.nav.push({ name: "全部商品", id: 0 });
      this.copylist.forEach((item) => {
        // console.log(item);
        if (item.pid == 0) {
          this.nav.push(item);
        } else {
          this.list.push(item);
        }
      });
    });
    // console.log(this.list);
  },
};
</script>
<style lang="scss">
.classifyswiper {
  width: 100%;  
  height: 7rem;
  padding: 0.4rem 0.4rem;
  box-sizing: border-box;
  img {
    width: 100%;
    height: 7rem;
  }
}
.classifycontain {
  margin-top: 1rem;
  img{
      width: 4rem;
  }
}
.kong{
  height: 10rem;
}
</style>